<template>
  <div
    :class="[
      { active: base.isShowLeft },
      { isShow: base.isEnterLoad },
      'record',
    ]"
  >
    <div class="bg" v-if="base.isEnterLoad"></div>
    <div class="record_mobile" v-if="isMobile">
      <a class="logo" href="https://wireai.com/" target="_blank">
        <img :src="`${imgurl}/wireai_logo.png`" />
      </a>
      <span
        :class="[{ disable: base.isNone }, 'btnAdd mobileBtn flexC']"
        @click="base.isEnterLoad ? '' : getNewSession()"
        id="btnAdd"
      >
        <i>新建对话</i>
      </span>
      <div class="navBtn" @click="openNav"></div>
    </div>
    <a class="logo" href="https://wireai.com/" target="_blank" v-else>
      <img :src="`${imgurl}wireai_logo.png`" />
    </a>
    <div :class="[{ listBox: isMobile }, { active: base.isShowNav }]">
      <span class="closeBtn" @click="openNav"></span>
      <div class="aiboxleft">
        <span
          :class="[{ disable: base.isNone }, 'btnAdd flexC']"
          @click="base.isEnterLoad ? '' : getNewSession()"
        >
          <i>新建对话</i>
        </span>
        <div class="aiboxicon" @click="showAibox">
          <img :src="`${imgurl}aiboxicon.png?v=0.1`" alt="" />
        </div>
      </div>
      <span
        v-if="base.guideIndex == 2 && !base.isMobile"
        class="guide btnAdd flexC"
      >
        <i>新建对话</i>
      </span>
      <span
        :class="[
          { g3: base.guideIndex == 3 },
          { g4: base.guideIndex == 4 },
          'tie',
        ]"
        v-if="
          (base.guideIndex == 2 ||
            base.guideIndex == 3 ||
            base.guideIndex == 4) &&
          !base.isMobile
        "
      ></span>
      <div class="serchBox">
        <input
          type="text"
          class="text"
          v-model="keyword"
          @input="base.isEnterLoad ? '' : handleInput"
          @blur="base.isEnterLoad ? '' : getkeyword"
          placeholder="搜索历史记录"
        />
        <span class="closeBtn show" v-if="keyword" @click="closeSearch"></span>
      </div>
      <div class="serchBox guide" v-if="base.guideIndex == 3 && !base.isMobile">
        <input
          type="text"
          class="text"
          v-model="keyword"
          disabled
          placeholder="搜索历史记录"
        />
      </div>
      <span class="guideTitle" v-if="base.guideIndex == 4 && !base.isMobile">
        {{
          base.sessionlist.length > 0
            ? base.sessionlist[0].title
            : "声屏障国家规范"
        }}
      </span>
      <div class="container">
        <div class="listCont">
          <div
            :class="[{ has: base.sessionlist.length > 8 }, 'list']"
            ref="listContainer"
            @scroll="handleScroll"
            v-infinite-scroll="loadMore"
            style="overflow: auto"
            infinite-scroll-distance="1"
          >
            <div
              :class="[{ topItem: item.istop == 1 }, 'itemTitle']"
              v-for="(item, index) in base.sessionlist"
              :key="index"
            >
              <div
                :class="[
                  { active: base.inSessionId == item.id },
                  { disable: isbatch },
                  { moblietem: base.isMobile },
                  { txt: item.type == 1 },
                  { fix: item.type == 2 },
                  'listItem',
                ]"
              >
                <div class="editTitle" v-if="item.isEdit">
                  <input
                    class="text"
                    type="text"
                    v-model="item.title"
                    ref="editInputRef"
                  />
                  <div
                    class="btnCon open flexC"
                    @click.stop="edittitle($event, item.id, item.title)"
                  >
                    <span class="btnopen show"></span>
                  </div>
                  <div class="btnCon close flexC" @click.stop="closeEdit()">
                    <span class="btnclose show"></span>
                  </div>
                </div>
                <div v-else>
                  <span
                    :class="[{ active: item.isCheck }, 'checkBtn']"
                    v-if="isbatch"
                    @click="base.isEnterLoad ? '' : selectTitle(item.id)"
                  ></span>
                  <span
                    :class="[{ active: item.isDor }, 'title']"
                    @click.passive="
                      base.isEnterLoad ? '' : getSession(item.id, item.type,item.cconversation_id)
                    "
                  >
                    {{ item.title.replace("<br />","") }}
                  </span>
                  <span
                    class="dot flexC"
                    v-if="!item.isDor && base.isMobile"
                    @click="getBor($event, index)"
                  >
                    <img :src="`${imgurl}dot2.png`" />
                  </span>
                  <i
                    v-if="item.istop == 1"
                    :class="[{ active: item.isDor }, 'top2']"
                    @click="toTop(item.id, item.istop)"
                  ></i>
                  <i
                    v-else
                    :class="[{ active: item.isDor }, 'top']"
                    @click="toTop(item.id, item.istop)"
                  ></i>
                  <i
                    :class="[{ active: item.isDor }, 'edit']"
                    @click.stop="openEdit(item.id)"
                  ></i>
                  <i
                    :class="[{ active: item.isDor }, 'del']"
                    @click.stop="delSession($event, item.id)"
                  ></i>
                </div>
              </div>
              <popcon-firm
                @cancelDelate="cancelDelate"
                v-if="item.isDelate"
                @definelDelate="definelDelate"
              >
              </popcon-firm>
            </div>
            <p class="loadgin" v-if="base.listLoad">正在加载...</p>
          </div>
        </div>
      </div>

      <div class="deleteBox" v-if="base.sessionlist.length != 0">
        <span class="retract" v-if="!isMobile" @click="gethide"></span>
        <span
          v-if="isbatch"
          :class="[{ active: isCheckAll }, 'checkAll show']"
          @click="checkAll"
          >全选</span
        >

        <span v-if="base.isEnterLoad" class="delete"> 批量删除 </span>
        <span
          v-else
          :class="[
            { active: isbatch },
            { disable: selectId.length == 0 && isbatch },
            'delete',
          ]"
          @click="isbatch ? delAllSession($event) : batchdelet()"
        >
          {{ isbatch ? "删除" : "批量删除" }}
        </span>
        <popcon-firm
          @cancelDelate="cancelDelate"
          v-if="isbatchDelete"
          @definelDelate="definelDelate"
        >
        </popcon-firm>
        <span v-if="isbatch" class="close show" @click="batchdelet"></span>
      </div>
    </div>
    <user-info></user-info>
  </div>
</template>
<script setup lang='ts'>
import { logo } from "@/utils/base.ts";
import { useSystemStore } from "@/store/modules/system";
import { useUserStore } from "@/store/modules/user";
import userInfo from "./userInfo.vue";
import popconFirm from "./popconFirm.vue";
const base = useSystemStore();
const useStore = useUserStore();
const api = inject("$base", null as any);
const $_ = inject("$_", null as any);
const imgurl = import.meta.env.VITE_APP_TITLE + "/assets/images/";
console.log(import.meta.env);
const selectId = ref<any>([]);
const isbatch = ref<boolean>(false);
const isbatchDelete = ref<boolean>(false);
const delateId = ref<number>();
const isCheckAll = ref<boolean>(false);
const editInputRef = ref(null);
const emit = defineEmits(["getSessionCon", "initList"]);
const keyword = ref<string>();
const isMobile = ref<boolean>(false);
const debounceTimer = ref<any>(null);
const isScroll = ref<boolean>(false);
onMounted(() => {
  base.isCreatLoad = false;
  const width = window.innerWidth;
  if (width <= 768) {
    isMobile.value = true;
  }
  window.addEventListener("resize", function () {
    const width = window.innerWidth;
    if (width <= 768) {
      isMobile.value = true;
    } else {
      isMobile.value = false;
    }
  });
  window.addEventListener("click", (e) => {
    e.stopPropagation();
    base.sessionlist.forEach((item) => {
      item.isDor = false;
    });
  });
});
const listContainer = ref(null);
function getBor(e: event, index: number) {
  e.stopPropagation();
  base.sessionlist[index].isDor = true;
}
function scrollDisabled() {
  const listContainer = document.querySelector(".list");
  let top = listContainer.scrollTop;
  if (top > 100) {
    return true;
  } else {
    return false;
  }
}
function loadMore() {
  if (base.listLoad || base.noMoreDataList) {
    return;
  }
  base.listLoad = true;
  if (scrollDisabled()) {
    emit("getMoreList", true);
  }
}

function isScrollAtBottom() {
  const listContainer = document.querySelector(".list");

  return (
    listContainer.scrollTop + listContainer.clientHeight ===
    listContainer.scrollHeight
  );
}
const isTs = ref<boolean>(false);
/**
 * 创建新窗口
 */
function getNewSession() {
  base.isplayaudio = false;
  base.isCreatLoad = false;
  base.sessionType = 0;
  if (base.isNewSess == true) {
    if (isTs.value == false && base.isCurrenDel == false) {
      ElMessage({
        message: h("p", null, [
          h("span", { style: "color: #0189f6" }, "当前已是最新页"),
        ]),
        customClass: "custom-message",
        iconClass: "custom-icon",
        duration: 2000,
      });
      isTs.value = true;
    }
    setTimeout(() => {
      base.isCurrenDel = false;
    }, 2000);

    setTimeout(() => {
      isTs.value = false;
    }, 5000);
  }
  base.isNewSess = true;
  base.inSessionId = 0;
  base.listpage = 1;
  base.isRegin = false;
  console.log(base.isRegin);
  base.isEnterLoad = false;
  base.isShowNav = false;
}
function gethide() {
  base.isShowLeft = base.isShowLeft == false ? true : false;
}
/**
 * 搜索输入框 失焦点事件
 */
function handleInput() {
  clearTimeout(debounceTimer.value);
  debounceTimer.value = setTimeout(() => {
    getkeyword();
  }, 500);
}
/**
 * 关闭搜索
 */
function closeSearch() {
  keyword.value = "";
  getkeyword();
}
/**
 * 搜索触发事件
 */
function getkeyword() {
  console.log("111111");
  base.keyword = keyword.value;
  base.listpage = 1;
  emit("initList", true);
}
function openNav() {
  base.isShowNav = !base.isShowNav;
}
/**
 * 批量删除
 */
function batchdelet() {
  reset();
  isbatch.value = !isbatch.value;
  if (!isbatch.value) {
    isbatchDelete.value = false;
  } else {
    selectId.value = [];
    isCheckAll.value = false;
    base.sessionlist.forEach((item) => {
      item.isCheck = false;
    });
  }
}
/**
 * 重置
 */
function reset() {
  base.sessionlist.forEach((item) => {
    item.isDelate = false;
  });
}
/**
 * 全选
 */
function checkAll() {
  isCheckAll.value = !isCheckAll.value;
  base.sessionlist.forEach((item) => {
    if (isCheckAll.value) {
      item.isCheck = true;
      selectId.value.push(item.id);
    } else {
      item.isCheck = false;
    }
  });
}
/**
 * 单选
 */
function selectTitle(id: number) {
  base.sessionlist.forEach((item) => {
    if (item.id == id) {
      item.isCheck = !item.isCheck;
      if (item.isCheck) {
        selectId.value.push(item.id);
      } else {
        selectId.value = $_.remove(
          selectId.value,
          (selectId) => selectId === item.id
        );
      }
    }
  });
}
function delAllSession(event) {
  base.clientY = event.clientY;
  if (selectId.value.length == 0) {
    return;
  }
  isbatchDelete.value = true;
}
/**
 * 删除会话
 */
function delSession(event, id: number) {
  event.stopPropagation();
  base.clientY = event.clientY;
  delateId.value = id;
  const foundIndex = $_.findIndex(base.sessionlist, { id: id });
  console.log(foundIndex);
  if (foundIndex !== -1) {
    base.sessionlist[foundIndex].isDelate = true;
  }
}
/**
 * 删除会话
 * @param id 可以删除多个
 */
function definelDelate() {
  let id;
  if (isbatchDelete.value) {
    id = selectId.value.join(",");
  } else {
    id = delateId.value;
  }
  api.delsession({ sessionid: id }).then((res) => {
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    selectId.value = [];
    base.listpage = 1;
    if (isbatchDelete.value) {
      isbatchDelete.value = false;
      base.isNewSess = true;
      emit("initList", true);
    } else {
      $_.remove(base.sessionlist, { id: delateId.value });
      if (delateId.value == base.inSessionId) {
        base.isNewSess = true;
      }
    }
    if (
      base.inSessionId == id ||
      selectId.value.indexOf(base.inSessionId) >= 0
    ) {
      base.isCurrenDel = true;
      getNewSession();
    }
    isCheckAll.value = false;
  });
}
function cancelDelate() {
  if (isbatchDelete.value) {
    isbatchDelete.value = false;
  } else {
    base.sessionlist.forEach((item) => {
      item.isDelate = false;
    });
  }
}
/**
 * 编辑标题
 */
function openEdit(id: number) {
  reset();
  base.sessionlist.forEach((item) => {
    if (item.id === id) {
      item.isEdit = !item.isEdit;
    } else {
      item.isEdit = false;
    }
  });
}
/**
 * 编辑标题 提交
 * @param sessionid
 * @param title 修改后的标题
 */
function edittitle(event, id: number, title: string) {
  console.log("1111111");
  event.stopPropagation();
  let data = {
    sessionid: id,
    title: title,
  };
  api.editsessiontitle(data).then((res) => {
    closeEdit();
  });
}
/**
 * 取消编辑
 */
function closeEdit() {
  console.log("7777");
  base.sessionlist.forEach((item) => {
    item.isEdit = false;
  });
}
function showAibox(){
	base.aiboxShow = true;
}
/**
 * 进入会话详情
 */
function getSession(id: number, type: number,comId :string) {
  base.isplayaudio = false;
  if (base.isWord == true) {
    base.isEnterLoad = false;
  }
  base.inSessionId = id;
  base.isNewSess = false;
  base.isSwich = true;
  base.talkpage = 1;
  base.noMoreDataTalk = false;
  base.isNohistory = true;
  base.isEnterLoad = false;
  base.sessionType = 0;
  if (type == 2) {
    base.sessionType = 2;
    base.isNewSess = true;
  } else {
    base.sessionType = 0;
	base.conversation_id = comId;
    emit("getSessionCon", true);
  }
  console.log(base.sessionType, type);

  openNav();
}
/**
 * 置顶
 * @param sessionid
 * @param top 1 置顶 0取消
 */
function toTop(id: number, top: number) {
  reset();
  let istop = top == 0 ? 1 : 0;
  let data = {
    sessionid: id,
    top: istop,
  };
  api.topsession(data).then((res) => {
    const selectedItem = $_.find(base.sessionlist, { id: id });
    selectedItem.istop = istop;
    if (selectedItem) {
      if (istop === 1) {
        $_.remove(base.sessionlist, { id: id });
        base.sessionlist.unshift(selectedItem);
      } else if (istop === 0) {
        getkeyword();
      }
    }
  });
}
</script>
<style lang="scss" scoped>
.record {
  width: 280px;
  height: 100vh;
  background: url(../../assets/images/leftbg.png) no-repeat 60px -40px #f8f9fa;
  background-size: 403px 214px;
  padding: 20px 0;
  transition: all 0.8s;
  position: relative;
  &.isShow {
    opacity: 0.7;
  }
  .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(255, 255, 255, 0.01);
    z-index: 1000;
  }
  .record_mobile {
    position: fixed;
    left: 0;
    top: 0;
    width: 100% !important;
    padding: 0;
    z-index: 80;
    height: 45px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    .logo {
      img {
        height: 25px;
      }
    }
    .mobileBtn {
      position: absolute;
      right: 95px;
      top: 10px;
      margin: 0;
      width: 75px;
      height: 25px;
      border-radius: 3px;
      box-shadow: 3px 1px 6px rgba(152, 211, 253, 0.4);

      i {
        font-size: 12px;
      }
      &::after {
        border-radius: 3px;
        left: 1px;
        top: 1px;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
      }
    }
    .logo {
      float: left;
      height: 100%;
    }
    .navBtn {
      width: 40px;
      height: 45px;
      cursor: pointer;
      position: absolute;
      right: 50px;
      background: url(../../assets/images/navBtn.png) no-repeat center center;
      background-size: 16px auto;
    }
  }

  &.active {
    width: 0;
    .retract {
      right: 8px !important;
      transform: rotate(180deg);
    }
    .btnAdd {
      i {
        z-index: 0;
      }
    }
  }
  .logo {
    margin: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      height: 30px;
      width: auto;
    }
    .tit {
      font-size: 15px;
      margin-left: 10px;
      font-family: "siyuanM";
    }
  }
  .tie {
    position: fixed;
    top: 95px;
    left: 125px;
    background: url(../../assets/images/guide_btn.png) no-repeat;
    background-size: 100%;
    width: 21px;
    height: 21px;
    z-index: 9999;
    &.g3 {
      left: 270px;
      top: 160px;
    }
    &.g4 {
      left: 258px;
      top: 225px;
    }
  }
  .btnAdd {
    margin: 40px 15px 20px;
    color: #4955f5;
    width: 120px;
    height: 40px;
    cursor: pointer;
    background-image: linear-gradient(90deg, #99e3e0, #afcefe);
    position: relative;
    border-radius: 8px;
    transition: all 0.8s;
    font-family: "siyuanR";
    &.guide {
      position: fixed;
      left: 15px;
      top: 85px;
      z-index: 999;
      margin: 0;
      transition: none;
    }
    &.disable {
      opacity: 0.6;
      cursor: default;
    }
    i {
      position: relative;
      z-index: 10;
      font-style: normal;
      background: linear-gradient(90deg, #0ac1ba, #2379ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      font-size: 16px;
      transition: all 0.6s;
    }
    &:hover:not(.disable):not(.guide) {
      i {
        color: #fff;
        background: none;
        -webkit-text-fill-color: #fff;
      }
    }
    &::after {
      content: "";
      position: absolute;
      background: #fff;
      left: 2px;
      top: 2px;
      width: calc(100% - 4px);
      height: calc(100% - 4px);
      border-radius: 6px;
      transition: all 0.8s;
    }
    &:hover:not(.disable):not(.guide) {
      background-image: linear-gradient(90deg, #0ac1ba, #2379ff);
    }
    &:hover:not(.disable):not(.guide)::after {
      opacity: 0;
      // background-image: linear-gradient(90deg, #0ac1ba, #2379ff);
      // left:0px;
      // top:0px;
      // width:calc(100% - 4px);
      // height:calc(100% - 4px);
      // border-radius:6px;
    }
  }
  .aiboxleft {
    display: flex;
    align-items: center;
    margin: 40px 15px 20px;
    justify-content: space-between;
    padding-right: 20px;
    .btnAdd {
      margin: 0;
    }
    .aiboxicon {
      cursor: pointer;
    }
  }
  .guideTitle {
    position: fixed;
    left: 4px;
    top: 205px;
    z-index: 999;
    background: url(../../assets/images/guide_t.png) no-repeat;
    background-size: 100%;
    width: 272px;
    height: 62px;
    color: #267bf7;
    padding: 0 90px 0 38px;
    line-height: 60px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .serchBox {
    border-top: solid 1px #ecf0f4;
    border-bottom: solid 1px #ecf0f4;
    height: 50px;
    width: calc(100% - 20px);
    margin: 0 10px;
    background: url(../../assets/images/icon_search.png) no-repeat 25px center;
    background-size: 14px 14px;
    position: relative;
    &.guide {
      position: fixed;
      left: 0;
      top: 145px;
      z-index: 999;
      width: 280px;
      background: url(../../assets/images/icon_search.png) no-repeat 25px center
        #f8f9fa;
      background-size: 14px 14px;
      margin: 0;
    }
    .text {
      width: 100%;
      background: none;
      height: 100%;
      padding: 0 25px 0 50px;
      outline: none;
      color: #2379ff;
      font-size: 15px;
      &::-webkit-input-placeholder {
        color: #b4bec9;
      }
    }
    .closeBtn {
      position: absolute;
      right: 0;
      background: url(../../assets/images/close02.png) no-repeat center center;
      background-size: 8px 8px;
      width: 30px;
      height: 100%;
      cursor: pointer;
      top: 0;
    }
  }
  .deleteBox {
    width: 100%;
    height: 40px;
    padding: 0 20px;
    line-height: 40px;
    position: relative;
    font-size: 12px;
    &::before {
      position: absolute;
      top: 0;
      width: calc(100% - 20px);
      left: 10px;
      height: 2px;
      background: #ecf0f4;
      content: "";
    }
    .retract {
      background: url(../../assets/images/retract.png) no-repeat;
      background-size: 100%;
      width: 33px;
      height: 58px;
      position: absolute;
      right: -20px;
      top: 20px;
      margin-top: -29px;
      z-index: 102;
      cursor: pointer;
      transition: all 0.8s;
      &:hover {
        transform: scale(1.1);
      }
    }
    .close {
      float: right;
      background: url(../../assets/images/close02.png) no-repeat right center;
      background-size: 8px 8px;
      position: relative;
      padding-left: 20px;
      width: 10px;
      height: 100%;
      cursor: pointer;
      &::after {
        content: "";
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
        width: 2px;
        height: 10px;
        background: #c9cad7;
        left: 0;
      }
    }
    .checkAll {
      color: #267bf7;
      position: relative;
      padding: 0 15px 0 18px;
      margin-right: 10px;
      display: block;
      float: left;
      cursor: pointer;
      &::before,
      &::after {
        content: "";
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
      }
      &::before {
        width: 10px;
        height: 10px;
        border: solid 1px #267bf7;
        border-radius: 50%;
        left: 0;
      }
      &.active::before {
        background: #267bf7;
      }
      &::after {
        width: 2px;
        height: 10px;
        background: #c9cad7;
        right: 2px;
      }
    }
    .delete {
      display: block;
      float: left;
      color: #9094b0;
      background: url(../../assets/images/delete.png) no-repeat left center;
      background-size: 12px 13px;
      padding-left: 20px;
      line-height: 40px;
      cursor: pointer;
      &.disable {
        cursor: default;
        opacity: 0.5;
      }
      &.active {
        background: url(../../assets/images/delete02.png) no-repeat left center;
        background-size: 12px 13px;
      }
    }
  }

  .nolistdata {
    padding: 0 10px;
    color: #b4bec9;
  }
  .container {
    height: auto;
    // overflow-y:hidden;
    max-height: calc(100vh - 340px);
    width: 100%;
    overflow-y: auto;
    .loadgin {
      text-align: center;
      color: #666;
    }
  }
  .listCont {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  .list {
    width: 100%;
    padding: 15px 0;
    // scrollbar-width: none;
    &.has {
      height: calc(100vh - 340px);
    }
    overflow-y: auto;
    position: relative;
    &:hover::-webkit-scrollbar {
      width: 3px;
    }
    .itemTitle {
      width: 100%;
      padding: 0 10px;
      height: 50px;
      position: relative;
      &.topItem {
        background: #eef0f1;
      }
    }
    .listItem {
      width: 100%;
      padding-left: 36px;
      height: 50px;
      box-sizing: border-box;
      line-height: 50px;
      font-size: 14px;
      border-radius: 8px;
      cursor: pointer;
      position: relative;
      color: #666666;
      transition: all 0.6s;
      font-family: "siyuanR";
      &::before {
        background: url(../../assets/images/icon_message03.png) no-repeat;
        background-size: 100%;
        width: 25px;
        height: 25px;
        position: absolute;
        left: 5px;
        top: 50%;
        transform: translateY(-50%);
        content: "";
        // border-radius:50%;
      }
      &.txt {
        &::before {
          background: url(../../assets/images/icon_text02.png) no-repeat;
          background-size: 100%;
          width: 25px;
          height: 25px;
          position: absolute;
          left: 5px;
          top: 50%;
          transform: translateY(-50%);
          content: "";
          // border-radius:50%;
        }
      }
      &.fix {
        &::before {
          background: url(../../assets/images/icon_fix01.png) no-repeat;
          background-size: 100%;
          width: 25px;
          height: 25px;
          position: absolute;
          left: 5px;
          top: 50%;
          transform: translateY(-50%);
          content: "";
          // border-radius:50%;
        }
      }
      .dot {
        position: absolute;
        right: 0;
        top: 0;
        width: 40px;
        height: 100%;
        img {
          height: 20px;
        }
      }
      &.disable::before {
        display: none;
      }
      .checkBtn {
        position: absolute;
        left: 0;
        top: 0;
        width: 36px;
        height: 100%;
        &::before {
          width: 10px;
          height: 10px;
          border: solid 1px #267bf7;
          border-radius: 50%;
          position: absolute;
          left: 10px;
          top: 50%;
          margin-top: -5px;
          content: "";
        }
        &.active::before {
          background: #267bf7;
        }
      }
      .editTitle {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        border: solid 1px #4955f5;
        border-radius: 8px;
        padding: 0 45px 0 5px;
        .text {
          width: 100%;
          height: 100%;
          background: none;
          outline: none;
        }
        .btnCon {
          position: absolute;
          height: 100%;
          transition: all 0.8s;
          top: 0;
          width: 30px;
          &.open {
            right: 25px;
            z-index: 99;
          }
          &.close {
            right: 5px;
          }
        }
        .btnopen,
        .btnclose {
          width: 18px;
          height: 18px;
          border-radius: 50%;
        }
        .btnopen {
          background: url(../../assets/images/icon_dui.png) no-repeat center
            center;
          background-size: 12px 12px;

          &:hover {
            background: url(../../assets/images/icon_dui01.png) no-repeat center
              center #e5f2ff;
            background-size: 12px 12px;
          }
        }
        .btnclose {
          background: url(../../assets/images/icon_cuo.png) no-repeat center
            center;
          background-size: 12px 12px;

          &:hover {
            background: url(../../assets/images/icon_cuo01.png) no-repeat center
              center #e5f2ff;
            background-size: 12px 12px;
          }
        }
      }
      .title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        height: 100%;
        display: block;
      }
      .del,
      .top,
      .edit,
      .top2 {
        width: 18px;
        height: 18px;
        position: absolute;
        display: block;
        top: 15px;
        border-radius: 50%;
        display: none;
        transition: all 0.8s;
        &.active {
          display: block;
        }
      }
      .del {
        background: url(../../assets/images/icon_del.png) no-repeat center
          center;
        background-size: auto 12px;
        right: 10px;
        &:hover {
          background: url(../../assets/images/icon_del01.png) no-repeat center
            center #e5f2ff;
          background-size: auto 12px;
        }
      }
      .top {
        background: url(../../assets/images/icon_top.png) no-repeat center
          center;
        background-size: auto 12px;
        right: 50px;
        &:hover {
          background: url(../../assets/images/icon_top01.png) no-repeat center
            center #e5f2ff;
          background-size: auto 12px;
        }
      }
      .top2 {
        background: url(../../assets/images/icon_top02.png) no-repeat center
          center;
        background-size: auto 12px;
        right: 50px;
        &:hover {
          background: url(../../assets/images/icon_top03.png) no-repeat center
            center #e5f2ff;
          background-size: auto 12px;
        }
      }
      .edit {
        background: url(../../assets/images/icon_edit.png) no-repeat center
          center;
        background-size: auto 12px;
        right: 30px;
        &:hover {
          background: url(../../assets/images/icon_edit01.png) no-repeat center
            center #e5f2ff;
          background-size: auto 12px;
        }
      }

      &.active {
        background: #fff;
        box-shadow: 0 0 7px rgba(166, 182, 229, 0.19);
        color: #2379f7;
        &::before {
          // box-shadow:0 0 7px rgba(35,121,247,.42);
          background: url(../../assets/images/icon_message02.png) no-repeat;
          background-size: 100%;
        }
        &.txt {
          &::before {
            background: url(../../assets/images/icon_text01.png) no-repeat;
            background-size: 100%;
          }
        }
        &.fix {
          &::before {
            background: url(../../assets/images/icon_fix02.png) no-repeat;
            background-size: 100%;
          }
        }
      }

      &.moblietem {
        &.active {
          .title {
            padding-right: 75px;
          }
        }
      }
      &:hover:not(.moblietem) {
        background: #fff;
        box-shadow: 0 0 7px rgba(166, 182, 229, 0.19);
        color: #2379f7;
        &::before {
          background: url(../../assets/images/icon_message02.png) no-repeat;
          background-size: 100%;
          // box-shadow:0 0 7px rgba(35,121,247,.42);
        }
        &.txt {
          &::before {
            background: url(../../assets/images/icon_text01.png) no-repeat;
            background-size: 100%;
          }
        }
        &.fix {
          &::before {
            background: url(../../assets/images/icon_fix02.png) no-repeat;
            background-size: 100%;
          }
        }
        .del,
        .top,
        .edit,
        .top2 {
          display: block;
        }
        .title {
          padding-right: 75px;
        }
      }
    }
  }
  .listBox {
    background: #f8f9fa;
    position: fixed;
    left: 110%;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 999;
    transition: all 0.5s;
    .closeBtn {
      background: url(../../assets/images/icon_cuo.png) no-repeat center center;
      background-size: 12px 12px;
      position: absolute;
      right: 0;
      top: 0;
      display: block;
      width: 40px;
      height: 40px;
    }
    &.active {
      left: 0;
    }
    .list {
      .listItem {
        font-size: 16px;
      }
    }
    .deleteBox {
      font-size: 14px;
    }
  }
}
@media screen and (max-width: 768px) {
  .record {
    position: fixed;
    left: 0;
    top: 0;
    width: 100% !important;
    z-index: 20;
    height: 45px !important;
    transition: none;
    .container {
      max-height: calc(100vh - 200px);
    }
    .list {
      &.has {
        height: calc(100vh - 200px);
      }
      .listItem {
        .title {
          padding-right: 40px;
          &.active {
            padding-right: 75px;
          }
        }
      }
    }
  }
}
</style>